<template>
  <Col
    :span="item.span"
    class="drag-col"
    @click="handleItem"
    :class="[{ active: activeComp.uuid === item.uuid }]"
  >
    <FormItem v-bind="item.__config__">
      <component :is="dragComp" />
    </FormItem>
    <Icon icon="ant-design:copy-twotone" class="drag-copy" @click="copyComponent(item, index)" />
    <Popconfirm
      title="确定删除该组件?"
      ok-text="确认"
      cancel-text="取消"
      @confirm="delComponent(index)"
    >
      <Icon icon="ant-design:delete-twotone" class="drag-del" />
    </Popconfirm>
  </Col>
</template>
<script lang="tsx" setup name="DraggableItem">
  import { toRefs } from 'vue';
  import { FormItem, Col, Popconfirm } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { renderItem } from './render';
  import type { FormComponentType } from '/#/form';
  import { useFormStore } from '/@/store/modules/workFlow/form';

  const props = defineProps<{
    item: FormComponentType<any>;
    index: number;
  }>();
  const store = useFormStore();
  const { activeComp, formState } = toRefs(store);
  const { copyComponent, delComponent } = store;
  const { item, index } = toRefs(props);
  /**
   * 拖拽组件数据处理
   */
  const dragComp = () => {
    return renderItem(item.value, formState.value);
  };
  /**
   * 点击组件
   */
  const handleItem = () => {
    activeComp.value = item.value as any;
  };
</script>
<style lang="less" scoped>
  @import './index.less';
</style>
